<template>
  <div id="lineBarChart"></div>
</template>
<script setup lang="ts">
  import * as echarts from 'echarts'
  import { COLOR_ARR } from '@/utils/constants/common'

  const props = defineProps({
    itemData: Object
  })

  const myChart = ref()
  const xAxisData: any = ref()
  const yAxisData1: any = ref()
  const yAxisData2: any = ref()
  const yAxisData3: any = ref()
  watch(
    () => props.itemData,
    (val) => {
      if (!val) return false
      xAxisData.value = val.recordTime
      yAxisData1.value = val.s11004
      yAxisData2.value = []
      yAxisData3.value = val.breakCntPerKilo
      myChart.value?.dispose()
      nextTick(() => {
        handleSetVisitChart()
      })
    },
    { immediate: true, deep: true }
  )

  const hexToRgba = (hex, opacity) => {
    let rgbaColor = ''
    let reg = /^#[\da-f]{6}$/i
    if (reg.test(hex)) {
      rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
        '0x' + hex.slice(3, 5)
      )},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
    }
    return rgbaColor
  }

  const handleSetVisitChart = () => {
    myChart.value = echarts.init(document.getElementById('lineBarChart'))
    let option = {
      backgroundColor: '#fff',
      color: COLOR_ARR,
      legend: {
        top: 10
      },
      tooltip: {
        trigger: 'axis'
        // extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
        // axisPointer: {
        //   type: 'shadow',
        //   shadowStyle: {
        //     color: '#ffffff',
        //     shadowColor: 'rgba(225,225,225,1)',
        //     shadowBlur: 5
        //   }
        // }
      },
      grid: {
        top: 55,
        left: 10,
        right: 50,
        bottom: 20,
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#333'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#D9D9D9'
            }
          },
          data: xAxisData.value
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '单位:转',
          position: 'left',
          max: 21000,
          min: 0,
          offset: 0,
          axisLabel: {
            textStyle: {
              color: '#666'
            }
          },
          nameTextStyle: {
            color: COLOR_ARR[0],
            fontSize: 12
          },
          // 分割线
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed',
              color: '#E9E9E9'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: COLOR_ARR[0]
            }
          },
          axisTick: {
            show: true
          }
        },
        // {
        //   type: "value",
        //   name: '单位:个',
        //   position: "left",
        //   min: 0,
        //   offset: 50,
        //   axisLabel: {
        //     textStyle: {
        //       color: "#666"
        //     }
        //   },
        //   nameTextStyle: {
        //     color: COLOR_ARR[2],
        //     fontSize: 12,
        //     // lineHeight: 40
        //   },
        //   // 分割线
        //   splitLine: {
        //     show: false,
        //     lineStyle: {
        //       type: "dashed",
        //       color: "#E9E9E9"
        //     }
        //   },
        //   axisLine: {
        //     show: true,
        //     lineStyle: {
        //       color: COLOR_ARR[2]
        //     }
        //   },
        //   axisTick: {
        //     show: true
        //   }
        // },
        {
          type: 'value',
          name: '单位:个',
          position: 'right',
          min: 0,
          offset: 0,
          axisLabel: {
            textStyle: {
              color: '#666'
            }
          },
          nameTextStyle: {
            color: COLOR_ARR[1],
            fontSize: 12
          },
          // 分割线
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed',
              color: '#E9E9E9'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: COLOR_ARR[1]
            }
          },
          axisTick: {
            show: true
          }
        }
      ],
      series: [
        {
          // name: "2018",
          name: '锭速',
          type: 'line',
          smooth: true,
          yAxisIndex: 0,
          symbolSize: 8,
          markLine: {
            lineStyle: {
              type: 'dashed'
            },
            label: {
              formatter: function (item) {
                // 对标签文本进行格式化，保留两位小数
                return item.name + ': ' + item.value.toFixed(0)
              }
            },
            data: [{ type: 'average', name: '均值' }]
          },
          zlevel: 3,
          lineStyle: {
            normal: {
              color: COLOR_ARR[0],
              shadowBlur: 3,
              shadowColor: hexToRgba(COLOR_ARR[0], 0.5),
              shadowOffsetY: 8
            }
          },
          symbol: 'circle', // 数据交叉点样式
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: hexToRgba(COLOR_ARR[0], 0.3)
                  },
                  {
                    offset: 1,
                    color: hexToRgba(COLOR_ARR[0], 0.1)
                  }
                ],
                false
              ),
              shadowColor: hexToRgba(COLOR_ARR[0], 0.1),
              shadowBlur: 10
            }
          },
          data: yAxisData1.value
        },

        //   {
        //   name: "新断头数",
        //   type: "line",
        //   smooth: true,
        //   symbolSize: 8,
        //   yAxisIndex: 2,
        //   zlevel: 3,
        //   markLine: {
        //     lineStyle: {
        //       type: 'dashed'
        //     },
        //     data: [{type: "average", name: "平均值"}],
        //   },
        //   lineStyle: {
        //     normal: {
        //       color: COLOR_ARR[1],
        //       shadowBlur: 3,
        //       shadowColor: _this.hexToRgba(COLOR_ARR[1], 0.5),
        //       shadowOffsetY: 8
        //     }
        //   },
        //   symbol: 'circle',//数据交叉点样式 (实心点)
        //   areaStyle: {
        //     normal: {
        //       color: new echarts.graphic.LinearGradient(
        //           0,
        //           0,
        //           0,
        //           1,
        //           [{
        //             offset: 0,
        //             color: _this.hexToRgba(COLOR_ARR[1], 0.3)
        //           },
        //             {
        //               offset: 1,
        //               color: _this.hexToRgba(COLOR_ARR[1], 0.1)
        //             }
        //           ],
        //           false
        //       ),
        //       shadowColor: _this.hexToRgba(COLOR_ARR[1], 0.1),
        //       shadowBlur: 10
        //     }
        //   },
        //   data: _this.yAxisData2
        // },
        {
          name: '千锭时断头',
          type: 'line',
          smooth: true,
          symbolSize: 8,
          showSymbol: false,
          yAxisIndex: 1,
          zlevel: 3,
          lineStyle: {
            normal: {
              showSymbol: false,
              color: COLOR_ARR[1],
              shadowBlur: 0,
              shadowColor: hexToRgba(COLOR_ARR[1], 0.5),
              shadowOffsetY: 0
            }
          },
          symbol: 'circle', // 数据交叉点样式 (实心点)
          data: yAxisData3.value
        }
      ]
    }
    myChart.value.setOption(option, true)
    window.addEventListener('resize', function () {
      myChart.value.resize()
    })
  }
</script>
<style scoped>
  #lineBarChart {
    height: 100%;
  }
</style>
